<template>
  <div class="main-container">
    <div class="top">
      <div class="title"><span>系统详情</span></div>
      <div class="detail"
        ><a-descriptions
          :label-style="{ marginBottom: '20px' }"
          :column="3"
          layout="inline-horizontal"
        >
          <a-descriptions-item label="系统名称">
            <span class="left">{{ data.systemName }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="系统版本">
            <span class="left">{{ data.versionName }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="授权IP">
            <span class="left">{{ data.serverIp }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="授权域名">
            <span class="left">{{ data.domainName }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="系统授权时间">
            <span class="left">{{ data.createTime }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="服务费到期时间">
            <span class="left">{{ data.serviceChargeEndTime }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="当前版本">
            <span class="left">{{ data.clientVersionName }}</span
            ><a-button type="text" style="margin-left: 10px" @click="newsFnSe">更新</a-button>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <div class="bottom">
      <div class="title">
        <div style="display: flex; align-items: center">
          <div class="line"></div><div>更新日志</div>
        </div>
        <div class="11"
          ><a-button @click="open" type="text" style="padding: 0">{{
            openShow == false ? '全部关闭' : '全部展开'
          }}</a-button></div
        ></div
      >
      <div class="detail">
        <a-timeline reverse v-if="list.length > 0">
          <a-timeline-item
            style="margin-top: 20px"
            v-for="item in list"
            :key="item.versionId"
            lineType="dashed"
          >
            <a-collapse
              class="top"
              :bordered="false"
              :active-key="item.key"
              expand-icon-position="right"
              @change="funslo(item)"
            >
              <a-collapse-item key="1">
                <template #header>
                  <div class="box">
                    <!-- <div class="line"></div> -->
                    <div class="text"
                      ><span style="color: #349efa; font-size: 16px; margin-right: 10px">{{
                        item.versionName
                      }}</span
                      ><span style="font-size: 12px">发布于：{{ item.createTime }}</span></div
                    >
                  </div>
                </template>
                <template #extra>
                  <div>{{ item.key == '1' ? '收起' : '展开' }}</div>
                </template>
                <div class="text">
                  <div class="titles">{{ item.versionTitle }}</div>
                  <div v-html="item.text" style="margin-top: 10px; font-size: 12px"></div>
                </div>
              </a-collapse-item>
            </a-collapse>
          </a-timeline-item>
        </a-timeline>
        <a-empty v-else />
      </div>
    </div>
    <!-- 更新 -->
    <a-modal
      v-model:visible="renewVisible"
      :mask-closable="false"
      title-align="start"
      width="600px"
      hide-cancel
      :closable="false"
      :esc-to-close="false"
      hide-ok
    >
      <template #title>
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            line-height: 30px;
            text-align: center;
          "
        >
          <div style="font-size: 16px">{{ datas.versionName }}</div>
          <div style="font-size: 12px">发布于：{{ data.createTime }}</div>
        </div>
      </template>
      <div style="padding: 20px; background-color: #f7faff; height: 500px; overflow: auto">
        <div v-html="datas.text"> </div>
      </div>
      <a-progress
        v-if="renewForm.proportion"
        :percent="renewForm.proportion"
        :show-text="false"
        size="large"
        :style="{ width: '100%', marginTop: '20px' }"
      />

      <div v-if="renewForm.message" style="margin-top: 20px">{{ renewForm.message }} </div>
      <template #footer>
        <a-space>
          <a-button
            v-if="showse == false"
            :loading="loadings"
            @click=";(renewVisible = false), (showse = false)"
          >
            暂不更新
          </a-button>
          <a-button v-if="showse == false" type="primary" :loading="loadings" @click="SSE">
            立即更新
          </a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { newsLog, news } from '@/api/url'
  import { onMounted, ref } from 'vue'
  import { get } from '@/api/http'
  import { Message } from '@arco-design/web-vue'
  const data: any = ref({})
  const datas: any = ref({})
  const list: any = ref([])
  const showse = ref(false)
  const renewForm: any = ref({ proportion: 0 })
  const source = ref()
  const loadings = ref(false)
  const renewVisible = ref(false)
  const newsFn = () => {
    get({
      url: newsLog,
      data: {},
    }).then((res) => {
      if (res.code == 0) {
        res.data.forEach((item: any) => {
          item.key = ['1']
        })
        list.value = res.data
      }
    })
  }
  const openShow = ref(false)
  function open() {
    openShow.value = !openShow.value
    list.value.forEach((item: any) => {
      if (openShow.value == false) {
        item.key = ['1']
      } else {
        item.key = []
      }
    })
  }

  const funslo = (val: any) => {
    console.log(val)
    list.value.forEach((item: any) => {
      if (val.versionId == item.versionId) {
        if (item.key.length >= 1) {
          item.key = []
        } else {
          item.key = ['1']
        }
      }
    })
  }

  const newsFnSe = () => {
    get({
      url: news,
      data: {},
    }).then((res) => {
      if (res.code == 0) {
        if (res.data.updateLogBean && res.data.updateLogBean.versionId > res.data.clientVersion) {
          renewVisible.value = true
          datas.value = res.data.updateLogBean
          console.log(datas.value)
        } else {
          Message.success('已是最新版本，无需更新')
        }
        data.value = res.data
      }
    })
  }

  const newsFnS = () => {
    get({
      url: news,
      data: {},
    }).then((res) => {
      if (res.code == 0) {
        data.value = res.data
      }
    })
  }
  const SSE = () => {
    if (window.EventSource) {
      // 建立连接
      source.value = new EventSource('/app/update/start')
      /**
       * 连接一旦建立，就会触发open事件
       */
      source.value.onopen = function (e: any) {
        console.log('建立连接', e)
        loadings.value = true
      }
      /**
       * 客户端收到服务器发来的数据
       */
      source.value.onmessage = function (e: any) {
        showse.value = true
        const data = JSON.parse(e.data)
        if (data.proportion) {
          data.proportion = data.proportion / 100
          renewForm.value = data
        } else {
          renewForm.value = data
          if (data.type == -1) {
            // Message.error(data.message)
          } else if (data.type == 1) {
            location.reload()
          }
        }
      }
      /**
       * 如果发生通信错误（比如连接中断），就会触发error事件
       */
      source.value.onerror = function (e: any) {
        if (e.readyState === EventSource.CLOSED) {
          console.log('连接关闭')
        } else {
          Message.success('更新成功，等待10秒刷新页面')
          renewVisible.value = false
          renewForm.value = {}
          showse.value = false
          source.value.close()
          loadings.value = false
        }
      }
    } else {
      console.log('浏览器不支持SSE')
    }
  }
  onMounted(async () => {
    // await SSE()
    newsFn()
    newsFnS()
  })
</script>

<style lang="less" scoped>
  .left {
    margin-left: 10px;
  }
  .top {
    .title {
      display: flex;
      height: 40px;
      background-color: #3491fa;
      border-radius: 10px 10px 0px 0px;
      align-items: center;
      padding: 0 20px;
      color: #ffffff;
    }
    .detail {
      padding: 40px;
      background-color: var(--color-bg-2);
      border-radius: 0px 0px 10px 10px;
      padding-bottom: 20px;
    }
  }
  .bottom {
    margin-top: 20px;
    background-color: var(--color-bg-2);
    border-radius: 10px 10px 10px 10px;
    .title {
      display: flex;
      height: 40px;
      border-radius: 10px 10px 0px 0px;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      border-bottom: 1px solid var(--color-neutral-3);
    }
    .detail {
      padding: 20px;
      padding-top: 0;
      border-radius: 0px 0px 10px 10px;
      .text {
        border-radius: 4px;
        // padding: 5px 10px;
        // background-color: var(--color-fill-1);

        .titles {
          display: flex;
          height: 38px;
          font-size: 13px;
          align-items: center;
          border-bottom: 1px solid var(--color-neutral-2);
        }
      }
    }
  }

  .11 {
    :deep(.arco-btn-size-medium) {
      padding: 0;
    }
  }

  .line {
    width: 5px;
    height: 15px;
    margin-right: 10px;
    background-color: #40a1ff;
  }

  :deep(.arco-collapse-item-active > .arco-collapse-item-header) {
    border-color: transparent;
  }

  :deep(.arco-collapse-item-header-right) {
    padding-left: 0;
    padding-right: 15px;
  }

  :deep(.arco-collapse-item .arco-collapse-item-icon-right) {
    right: 0;
  }
</style>
